<template>
<view class="shopcontent">
	<!-- 轮播图start -->
	<view class="HomeSwiperImgContent">
		<view class="uni-padding-wrap">
	    <view class="page-section swiper">
	        <view class="page-section-spacing">
	            <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
	                <swiper-item v-for="(item,index) in swiperimgdata" :key="item.id">
	                    <image class="HomeSwiperImg" :src="item.imgUrl"></image>
	                </swiper-item>
	            </swiper>
	        </view>
	    </view>
	</view>
	</view>
	<!-- 轮播图end -->
	<!-- 店铺名介绍start -->
	<view class="shopname">
		<view class="titname"><text>{{shopname}}</text><text :class="[openNow==0 ? 'bcolor':'gcolor','openNow']">{{openNow==0?'营业中':'未营业'}}</text></view>
		<view class="tittype"><text v-for="item in tagList" :key=item.id>{{item.name}}</text></view>
		<view class="titmoney">人均：<text>￥{{perCapita}}</text></view>
	</view>
	<!-- 位置,联系方式start -->
	<view class="titlineposition">
		<view>
		<text class="iconfont iconweizhibiaoji"></text>
		<text class="mapname" @click="goshop">{{address}}</text>
		</view>
		<text class="iconfont icondianhua" @click="callme"></text>
	</view>
	<!-- 位置,联系方式end -->
	<!-- 店铺名介绍end -->
	<!-- 店铺详细start -->
	<view class="shopdetail">
		<view class="dtitname">基本信息</view>
		<view class="BusinessHours"><text class="iconfont iconshijian"></text><text>营业时间：{{businessHours}}</text></view>
		
		<view class="condition">
			<view v-for="item in facilityList" :key="item.id">
				<text class="iconfont" :class="item.icon"></text>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
	<!-- 店铺详细end -->
	<!-- 底部下单start -->
	<view class="bottommenu">
		<view class="placeorder" @click="goorderdishes">到店下单</view>
		<view class="advanceorder">预约下单</view>
	</view>
	<!-- 底部下单end -->
</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图start
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				swiperimgdata:[
					{id:'1',value:'/static/img/homepage/s1.jpg'},
					{id:'2',value:'/static/img/homepage/s2.jpg'},
					{id:'3',value:'/static/img/homepage/s3.jpg'},
					{id:'4',value:'/static/img/homepage/s4.jpg'},
					{id:'5',value:'/static/img/homepage/s5.jpg'}
				],
				//轮播图end
				shopname:'',
				openNow:'',
				tagList:'',
				perCapita:'',
				address:'',
				phone:'',
				businessHours:'',
				facilityList:'',
			}
		},
		created(){
		},
		onLoad: function (data) {
			this.getshopdetatil(data.id);
			// console.log(data.id);
		},
		onReady() {
		},
		methods: {
			//店铺信息
			getshopdetatil(id){
				uni.request({
					url: this.zurl+'/merchant/findById',
					method: 'GET',
					data: {
						merchantId:id,
					},
					success: res => {
						if(res.data.status==0){
							console.log(res.data)
							this.swiperimgdata=res.data.data.shopRotationMapList;
							this.shopname=res.data.data.name;
							this.openNow=res.data.data.openNow;
							this.tagList=res.data.data.tagList;
							this.perCapita=res.data.data.perCapita;
							this.address=res.data.data.address;
							this.phone=res.data.data.phone;
							this.businessHours=res.data.data.businessHours;
							this.facilityList=res.data.data.facilityList;
						}
					}
				});
			},
			//到店路线,打开内置地图
			goshop(){
				 uni.openLocation({
					latitude: 31.23032,
					longitude: 121.473691,
					success: function () {
						console.log('success');
					}
				});
			},
			//拨打电话
			callme(){
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			//到店下单
			goorderdishes(){
				uni.navigateTo({
					url:'orderdishes'
				})
			},
			//预约下单
		},
		}
</script>

<style lang="less" scoped>
	.bcolor{
		background-color: #F8614F;
	}
	.gcolor{
		background-color: #6c6c6c;
	}
	.shopcontent{
		background-color: #f3f3f3;
	//轮播图
	.HomeSwiperImgContent{
		.swiper{
			height: 460upx;
		}
		.HomeSwiperImg{
			height: 100%;
			width: 100%;
		}
	}
	//店铺名介绍
	.shopname{
		background-color: #fff;
		padding: 30upx;
		.titname{
			font-size: 20px;
		}
		.openNow{
			float: right;
			font-size: 12px;
			vertical-align: center;
			border-radius: 5px;
			padding: 2px 4px;
			color: #fff;
		}
		.tittype{
			margin-top: 15px;
			text{
				padding: 2px 10px;
				background-color: #E0E3E0;
				font-size: 14px;
				color: #606360;
				border-radius: 20px;
				margin-right: 10px;
			}
		}
		.titmoney{
			color: #606360;
			font-size: 16px;
			margin-top: 20px;
			text{
				color: #F8614F;
			}
		}
	}
	//位置，联系方式
	.titlineposition{
		background-color: #fff;
		padding: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 18px;
		color: #606360;
		border-top:1px solid #eaeaea;
		.iconweizhibiaoji{
			margin-right: 5px;
		}
		.icondianhua{
			color: #F94F47;
			font-size: 18px;
		}
		.mapname{
			font-size: 16px;
		}
		.shopdial{
			padding-top: 5px;
		}
	}
	//店铺详细
	.shopdetail{
		background-color: #fff;
		margin-top: 20px;
		margin-bottom: 100upx;
		padding: 30upx;
		.dtitname{
			font-size: 20px;
		}
		.BusinessHours{
			margin-top: 15px;
			font-size: 16px;
			text{
				color: #606360;
				margin-right: 5px;
			}
		}
		.condition{
			display: flex;
			margin-top: 15px;
			font-size: 16px;
			text{
				margin-right:5px;
				color: #606360;
			}
		}
	}
	//底部下订单
	.bottommenu{
		display: flex;
		flex-direction: row;
		color: #fff;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		letter-spacing: 2px;
		font-size: 14px;
		.placeorder{
			background-color: #606360;
			flex: 2;
		}
		.advanceorder{
			background-color: #F8614F;
			padding: 0 20upx;
		}
	}
	
	
}
</style>
